<!-- 固定导航栏 -->
<header class="fixed top-0 left-0 right-0 bg-white nav-shadow z-50 transition-all duration-300">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center py-4">
            <div class="flex items-center space-x-2">
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-800">考试成绩系统</h1>
            </div>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex space-x-8">
                <a href="/" class="{{ 'text-primary' if request.path == '/' else 'text-gray-600 hover:text-primary transition-colors' }} font-medium flex items-center space-x-1">
                    <i class="fa fa-dashboard"></i>
                    <span>仪表盘</span>
                </a>
                <a href="/" class="{{ 'text-primary' if request.path == '/' and 'search' in request.args else 'text-gray-600 hover:text-primary transition-colors' }} font-medium flex items-center space-x-1">
                    <i class="fa fa-search"></i>
                    <span>成绩查询</span>
                </a>
                {% if current_user.role == 'admin' %}
                <a href="/batch_query" class="{{ 'text-primary' if request.path == '/batch_query' else 'text-gray-600 hover:text-primary transition-colors' }} font-medium flex items-center space-x-1">
                    <i class="fa fa-users"></i>
                    <span>批量查询</span>
                </a>
                {% endif %}
                <a href="/" class="{{ 'text-primary' if '/settings' in request.path else 'text-gray-600 hover:text-primary transition-colors' }} font-medium flex items-center space-x-1">
                    <i class="fa fa-cog"></i>
                    <span>设置</span>
                </a>
            </nav>
            
            <!-- 用户信息 -->
            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-2">
                    <img src="https://picsum.photos/id/64/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
                    <span class="text-gray-700 font-medium hidden md:inline">{{ current_user.username }}</span>
                </div>
                <a href="/logout" class="text-gray-600 hover:text-primary transition-colors font-medium flex items-center space-x-1">
                    <i class="fa fa-sign-out"></i>
                    <span class="hidden md:inline">注销</span>
                </a>
                <!-- 移动端菜单按钮 -->
                <button class="md:hidden text-gray-600" id="mobile-menu-button">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden pb-4" id="mobile-menu">
            <nav class="flex flex-col space-y-3">
                <a href="/" class="{{ 'text-primary bg-gray-50' if request.path == '/' else 'text-gray-600 hover:bg-gray-100 transition-colors' }} font-medium flex items-center space-x-2 px-2 py-1 rounded">
                    <i class="fa fa-dashboard"></i>
                    <span>仪表盘</span>
                </a>
                <a href="/" class="{{ 'text-primary bg-gray-50' if request.path == '/' and 'search' in request.args else 'text-gray-600 hover:bg-gray-100 transition-colors' }} font-medium flex items-center space-x-2 px-2 py-1 rounded">
                    <i class="fa fa-search"></i>
                    <span>成绩查询</span>
                </a>
                {% if current_user.role == 'admin' %}
                <a href="/batch_query" class="{{ 'text-primary bg-gray-50' if request.path == '/batch_query' else 'text-gray-600 hover:bg-gray-100 transition-colors' }} font-medium flex items-center space-x-2 px-2 py-1 rounded">
                    <i class="fa fa-users"></i>
                    <span>批量查询</span>
                </a>
                {% endif %}
                <a href="/" class="{{ 'text-primary bg-gray-50' if '/settings' in request.path else 'text-gray-600 hover:bg-gray-100 transition-colors' }} font-medium flex items-center space-x-2 px-2 py-1 rounded">
                    <i class="fa fa-cog"></i>
                    <span>设置</span>
                </a>
                <a href="/logout" class="text-gray-600 hover:bg-gray-100 transition-colors font-medium flex items-center space-x-2 px-2 py-1 rounded border-t border-gray-200 pt-3 mt-2">
                    <i class="fa fa-sign-out"></i>
                    <span>注销</span>
                </a>
            </nav>
        </div>
    </div>
</header>